<template>
  <div class="dashboard-container" @keyup.enter="getHaveOrder">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>扫码验证区域</span>
            <el-button style="float: right;" :type="scan ? 'danger':'primary'" @click="startScan"  >
              {{scan? "停止扫码":"启动扫码"}}</el-button>
          </div>
          <div>
            <el-input v-model="code" ref="code"></el-input>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span v-if="!username">订单信息</span>
            <span v-else>{{role}}--{{username}}</span>
          </div>
          <el-table :data="orders" border >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="type_label" label="订单类型"></el-table-column>
            <el-table-column prop="eat_date" label="日期"></el-table-column>
            <el-table-column prop="eat_type_label" label="类型"></el-table-column>
            <el-table-column prop="status_label" label="状态"></el-table-column>
            <el-table-column prop="created_at" label="订餐时间"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { checkOrders } from '../../api/book-order'
export default {
  name: 'dashboard',
  data() {
    return {
      code: '',
      scan: false,
      active: true,
      orders: [],
      role: '',
      username: '',
      interval: ''
    }
  },
  methods: {
    getHaveOrder() {
      if (this.scan && this.active) {
        this.active = false
        checkOrders(this.code).then(res => {
          this.active = true
          this.code = ''
          if (res.err_code) {
            this.$message.error(res.msg)
            this.orders = []
            this.role = ''
            this.username = ''
            return
          }
          this.role = res.role
          this.username = res.username
          if (res.orders.length > 0) {
            this.orders = res.orders
          } else {
            this.orders = []
          }
        })
      }
    },
    startScan() {
      if (!this.scan) {
        this.$refs['code'].focus()
        this.interval = setInterval(() => {
          this.$refs['code'].focus()
        }, 1000)
      } else {
        clearInterval(this.interval)
        this.interval = null
      }
      this.scan = !this.scan
    }
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
